import React from 'react';
import {Route, Redirect, Link, HashRouter, Switch} from 'react-router-dom';
import {A} from './A';
import {B} from './B';
import {C} from './C';
/**
 * 嵌套路由
 * @returns {Element}
 * @constructor
 */
export const App = function () {
    return (
        <>
            <div>
                <HashRouter>
                    <div>
                        <Link to='/a'>go to a Component</Link>
                    </div>
                    <div>
                        <Link to={'/b'}>go to b Component</Link>
                    </div>
                    <div>
                        <Link to='/c'>go to c Component</Link>
                    </div>

                <div>
                    <Switch>
                        {/*如果是/地址则重定向到a路由*/}
                        <Redirect from={'/'} to='/a' exact={true} />
                        <Route path='/a' component={A} />
                        <Route path='/b' component={B} />
                        <Route path='/c' component={C} />
                        {/*如果路由都不匹配则重定向至/*/}
                        <Redirect to={'/'} />
                    </Switch>
                </div>
                </HashRouter>
            </div>
        </>
    )

};